<template>
	<view class="page">
		<!-- 流星-->
		<dawnSatr></dawnSatr>
		<view class="top-bg">
			<!-- <view class="top-box-img" :style="{backgroundImage:'url('+mineTopBg+')'}"></view> -->
		</view>

		<view class="msg-container">



			<view class="msg-box">
				<image class="msg-box--image" mode="aspectFit" :src="appConfig.companyRespVO.logoText"></image>
				<!-- <view class="msg-box--title">
						<view>{{ appConfig.appTitle }}</view>
					</view> -->
			</view>
		</view>

		<view class="loader-box">
			<view class="loader">
				<view class="circle loading1"></view>
				<view class="circle loading2"></view>
				<view class="circle loading3"></view>
				<view class="circle loading4"></view>
				<view class="circle loading5"></view>
				<view class="circle loading6"></view>
				<view class="circle loading7"></view>
				<view class="circle loading8"></view>

			</view>
			<view class="loader-box--text">
				{{ msgData.value }}
			</view>
		</view>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>


	</view>

</template>

<script>
	const app = getApp();
	import page_mixin from '@/mixins/page_mixin.js'
	import * as api from '@/api/api.js';
	import * as config from '@/api/config.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		mixins: [page_mixin],
		computed: mapGetters(['appConfig']),
		data() {
			return {
				loading: false,
				borderRadius: 40,
				msgData: {},
				content: '',
				size: 40,
				msg: '',
				mineTopBg: ''
			}
		},
		onLoad(options) {
			console.info("wechat_login options")
			console.table(options)
			this.msg = options.msg;
			this.getData();
		},
		methods: {
			getData() {
				let that = this;
				api.getConfigByKey(config.CONFIG_TYPE.APP_AUTH).then(res => {
					console.table(res);
					if (res.code === 0 && res.data.visible) {
						that.msgData = res.data;
					} else {
						uni.switchTab({
							url: '/main/index/index'
						})
					}
				}).catch(err => {

				})
				api.getMineData().then(res => {
					if (res.code === 0) {
						this.mineTopBg = res.data.mineTopBg;
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.msg-container {
		position: relative;
		// margin-top: -280px;
		margin-top: - $dawn-top-bg-height - 15;
		// padding: 20rpx 50rpx 20rpx 50rpx;
		padding: $dawn-page-container-padding;
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
	}

	.msg-box {
		// z-index: 10000;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		// height: 50vh;
		// background-color: #FFFFFF;
		// box-shadow: $dawn-box-shadow;
		// border-radius: $dawn-border-radius;

		&--image {
			border-radius: 8rpx;
			// width: 100%;
			height: 120rpx;
		}

		&--title {
			display: flex;
			flex-direction: column;
			align-items: center;

			// margin-bottom: 12vh;
			color: $dawn-theme-color;
			font-size: $dawn-font-size-xl;
			font-weight: bolder;
		}
	}


	/* 加载动画*/
	.loader-box {
		position: absolute;
		width: 100%;
		top: 55%;
		text-align: center;

		&--text {
			position: absolute;
			left: 0;
			width: 100%;
			height: 120rpx;
			margin-top: 55px;
			color: $dawn-theme-color-dark;

		}
	}

	.loader {
		position: absolute;
		width: 120rpx;
		height: 120rpx;
		// top: 60%;
		left: 50%;
		transform: translate(-50%, -50%);

		&--text {
			position: absolute;
			left: 0;
			width: 500px;
			height: 120rpx;
			text-align: center;
			margin-top: 50px;
		}
	}

	.circle {
		color: $dawn-theme-color;
		position: absolute;
		border-radius: 100%;
		width: 30rpx;
		height: 30rpx;
		display: inline-block;
		float: none;
		background-color: currentColor;
		border: 0 solid currentColor;
		-webkit-animation: spin 1s infinite ease-in-out;
		-moz-animation: spin 1s infinite ease-in-out;
		-o-animation: spin 1s infinite ease-in-out;
		animation: spin 1s infinite ease-in-out
	}

	.loader :nth-child(1) {
		top: 5%;
		left: 50%;
		-webkit-animation-delay: -.875s;
		-moz-animation-delay: -.875s;
		-o-animation-delay: -.875s;
		animation-delay: -.875s
	}

	.loader :nth-child(2) {
		top: 18.1801948466%;
		left: 81.8198051534%;
		-webkit-animation-delay: -.75s;
		-moz-animation-delay: -.75s;
		-o-animation-delay: -.75s;
		animation-delay: -.75s
	}

	.loader :nth-child(3) {
		top: 50%;
		left: 95%;
		-webkit-animation-delay: -.625s;
		-moz-animation-delay: -.625s;
		-o-animation-delay: -.625s;
		animation-delay: -.625s
	}

	.loader :nth-child(4) {
		top: 81.8198051534%;
		left: 81.8198051534%;
		-webkit-animation-delay: -.5s;
		-moz-animation-delay: -.5s;
		-o-animation-delay: -.5s;
		animation-delay: -.5s
	}

	.loader :nth-child(5) {
		top: 94.9999999966%;
		left: 50.0000000005%;
		-webkit-animation-delay: -.375s;
		-moz-animation-delay: -.375s;
		-o-animation-delay: -.375s;
		animation-delay: -.375s
	}

	.loader :nth-child(6) {
		top: 81.8198046966%;
		left: 18.1801949248%;
		-webkit-animation-delay: -.25s;
		-moz-animation-delay: -.25s;
		-o-animation-delay: -.25s;
		animation-delay: -.25s
	}

	.loader :nth-child(7) {
		top: 49.9999750815%;
		left: 5.0000051215%;
		-webkit-animation-delay: -.125s;
		-moz-animation-delay: -.125s;
		-o-animation-delay: -.125s;
		animation-delay: -.125s
	}

	.loader :nth-child(8) {
		top: 18.179464974%;
		left: 18.1803700518%;
		-webkit-animation-delay: 0s;
		-moz-animation-delay: 0s;
		-o-animation-delay: 0s;
		animation-delay: 0s
	}

	@-webkit-keyframes spin {

		0%,
		100% {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1)
		}

		20% {
			opacity: 1
		}

		80% {
			opacity: 0;
			-webkit-transform: scale(0);
			transform: scale(0)
		}
	}

	@-moz-keyframes spin {

		0%,
		100% {
			opacity: 1;
			-moz-transform: scale(1);
			transform: scale(1)
		}

		20% {
			opacity: 1
		}

		80% {
			opacity: 0;
			-moz-transform: scale(0);
			transform: scale(0)
		}
	}

	@-o-keyframes spin {

		0%,
		100% {
			opacity: 1;
			-o-transform: scale(1);
			transform: scale(1)
		}

		20% {
			opacity: 1
		}

		80% {
			opacity: 0;
			-o-transform: scale(0);
			transform: scale(0)
		}
	}

	@keyframes spin {

		0%,
		100% {
			opacity: 1;
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-o-transform: scale(1);
			transform: scale(1)
		}

		20% {
			opacity: 1
		}

		80% {
			opacity: 0;
			-webkit-transform: scale(0);
			-moz-transform: scale(0);
			-o-transform: scale(0);
			transform: scale(0)
		}
	}
</style>